﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="登录界面.aspx.cs" Inherits="ProjectStudy.用户登录界面" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/jQuerySession.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //setCookie("username", "ls");
            //setCookie("pwd", "123");
            //delCookie("username");
            //alert(getCookie("username")+","+getCookie("pwd"));



            $("#logUsername").val();
            //------------------记住密码勾选后记住账号同时勾选------------------------------------
            $("#remPwd").click(function () {
                var pwdChecked = $("#remPwd").attr("checked");
                if (pwdChecked) {
                    $("#remUsername").attr("checked", true);
                }
            });
            $("#remUsername").click(function () {
                var usernameChecked = $("#remUsername").attr("checked");
                if (!usernameChecked) {
                    $("#remPwd").attr("checked", false);
                }
            });
            //------------------记住密码勾选后记住账号同时勾选------------------------------------

            //------------------用户登录----------------------------------------------------------

            $("#logUsername").focus(function () {
                $("#logUsernameRequired").css("display", "none");
            });
            $("#logPwd").focus(function () {
                $("#logPwdRequired").css("display", "none");
            });
            $("#tbVerificationCode").focus(function () {
                $("#logCodeValid").css("display", "none");
            });

            $("#logClear").click(function () {
                $("#logUsernameRequired").css("display", "none");
                $("#logPwdRequired").css("display", "none");
                $("#logCodeValid").css("display", "none");
                $("#logUsername").val("");
                $("#logPwd").val("");
                $("#tbVerificationCode").val("");

            });

            $("#logLogin").click(function () {
                $("#logUsernameRequired").css("display", "none");
                $("#logPwdRequired").css("display", "none");
                $("#logCodeValid").css("display", "none");

                var username = $("#logUsername").val();
                var pwd = $("#logPwd").val();
                if (username.length == 0) {
                    $("#logUsernameRequired").css("display", "inherit");
                }
                if (pwd.length == 0) {
                    $("#logPwdRequired").css("display", "inherit");
                }

                $.ajax({
                    //要用post方式      
                    type: "Post",
                    //方法所在页面和方法名      
                    url: "登录界面.aspx/GetVerificationCode",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (data) {
                        //返回的数据用data.d获取内容      
                        var code = $("#tbVerificationCode").val();
                        code = code.toUpperCase();
                        if (code == data.d) {
                            //alert("验证码验证成功");
                            $.ajax({
                                type: "post",
                                url: "Ajax/RegisterLoginChangePwdFindPwd.ashx",
                                data: { "action": "login", "username": username, "pwd": pwd },
                                dataType: "json",
                                success: function (data) {
                                    if (data["status"] == "success") {
                                        alert("登录成功");
                                    }
                                    if (data["status"] == "usernameOrPwdErr") {
                                        $("#logPwd").val("");
                                        $("#tbVerificationCode").val("");
                                        $("#Img1").attr("src", "Captcha.ashx?codelength=4&&id=" + Math.random());
                                        alert("账号或密码错误");
                                    }
                                },
                                error: function (err) {
                                    alert("ajax登录错误1");
                                }
                            });
                        }
                        else {
                            $("#logCodeValid").css("display", "inherit");
                            $("#tbVerificationCode").val("");
                            $("#Img1").attr("src", "Captcha.ashx?codelength=4&&id=" + Math.random());
                        }
                    },
                    error: function (err) {
                        alert("ajax登录错误2");
                    }
                });

            });
            //------------------用户登录----------------------------------------------------------

            //------------------用户注册----------------------------------------------------------
            $("#regUsername").focus(function () {
                $("#regUsernameValid").css("display", "none");
            });
            $("#regPwd").focus(function () {
                $("#regPwdValid").css("display", "none");
            });
            $("#regConfirmPwd").focus(function () {
                $("#regConfirmPwdValid").css("display", "none");
            });
            $("#regEmail").focus(function () {
                $("#regEmailValid").css("display", "none");
            });

            $("#regRegister").click(function () {
                $("#regUsernameValid").css("display", "none");
                $("#regPwdValid").css("display", "none");
                $("#regConfirmPwdValid").css("display", "none");
                $("#regEmailValid").css("display", "none");

                var username = $("#regUsername").val();
                var pwd = $("#regPwd").val();
                var confirmPwd = $("#regConfirmPwd").val();
                var email = $("#regEmail").val();

                if (username.length == 0) {
                    $("#regUsernameValid").html("*账号不得为空");
                    $("#regUsernameValid").css("display", "inherit");
                }
                if (pwd.length == 0) {
                    $("#regPwdValid").css("display", "inherit");
                }
                if (confirmPwd == 0) {
                    $("#regConfirmPwdValid").html("*确认密码不得为空");
                    $("#regConfirmPwdValid").css("display", "inherit");
                }
                if (confirmPwd != pwd) {
                    $("#regConfirmPwdValid").html("*两次密码不一致");
                    $("#regConfirmPwdValid").css("display", "inherit");
                }

                if (email.length == 0) {
                    $("#regEmailValid").html("*邮箱不得为空");
                    $("#regEmailValid").css("display", "inherit");
                }
                else {
                    if (!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/)) {
                        $("#regEmailValid").html("*邮箱格式不正确");
                        $("#regEmailValid").css("display", "inherit");
                    }
                    else {
                        if (username.length > 0 && pwd.length > 0 && pwd == confirmPwd) {
                            $.ajax({
                                type: "post",
                                url: "Ajax/RegisterLoginChangePwdFindPwd.ashx",
                                data: { "action": "register", "username": username, "pwd": pwd, "email": email },
                                //                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    if (data["status"] == "exist") {
                                        $("#regUsernameValid").html("*该账号已存在");
                                        $("#regUsernameValid").css("display", "inherit");
                                        //alert("该账号已存在");

                                    }
                                    if (data["status"] == "success") {
                                        alert("恭喜，注册成功");
                                    }
                                },
                                error: function (err) {
                                    alert("ajax注册错误1");
                                }
                            });
                        }
                    }
                }
            });

            $("#regClear").click(function () {
                $("#regUsername").val("");
                $("#regPwd").val("");
                $("#regConfirmPwd").val("");
                $("#regEmail").val("");
                $("#regUsernameValid").css("display", "none");
                $("#regPwdValid").css("display", "none");
                $("#regConfirmPwdValid").css("display", "none");
                $("#regEmailValid").css("display", "none");

                $('#level2').removeClass('pw-weak');
                $('#level2').removeClass('pw-medium');
                $('#level2').removeClass('pw-strong');
                $('#level2').addClass(' pw-defule');
            });

            //密码强度检测
            $('#regPwd').keyup(function () {
                var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");

                if (false == enoughRegex.test($(this).val())) {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass(' pw-defule');
                    //密码小于六位的时候，密码强度图片都为灰色 
                }
                else if (strongRegex.test($(this).val())) {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass(' pw-strong');
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
                }
                else if (mediumRegex.test($(this).val())) {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass(' pw-medium');
                    //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
                }
                else {
                    $('#level2').removeClass('pw-weak');
                    $('#level2').removeClass('pw-medium');
                    $('#level2').removeClass('pw-strong');
                    $('#level2').addClass('pw-weak');
                    //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
                }
                return true;
            });
            //------------------用户注册----------------------------------------------------------

            //------------------找回密码----------------------------------------------------------
            $("#findOk").click(function () {
                $("#findUsernameValid").css("display", "none");
                var username = $("#findUsername").val();
                if (username.length == 0) {
                    $("#findUsernameValid").html("*账号为必填项");
                    $("#findUsernameValid").css("display", "inherit");
                }
                else {
                    $.ajax({
                        type: "Post",
                        url: "Ajax/RegisterLoginChangePwdFindPwd.ashx",
                        data: { "action": "findpwd", "username": username },
                        dataType: "json",
                        success: function (data) {
                            if (data["status"] == "success") {
                                alert("密码已发送至：" + data["email"] + "请及时登录修改密码");
                            }
                            if (data["status"] == "noUsername") {
                                $("#findUsernameValid").css("display", "inherit");
                                $("#findUsernameValid").css("color", "red");
                            }
                        },
                        error: function (err) {
                            alert("ajax注册错误1");
                        }
                    });
                }
            });

            $("#findUsername").focus(function () {
                $("#findUsernameValid").css("display", "none");
            });

            $("#findClear").click(function () {
                $("#findUsername").val("");
                $("#findUsernameValid").css("display", "none");
            });


            //------------------找回密码----------------------------------------------------------

            //------------------修改密码----------------------------------------------------------
            $("#chgOk").click(function () {
                $("#chgOldValid").css("display", "none");
                $("#chgNewPwdValid").css("display", "none");
                $("#chgConfirmNewPwdValid").css("display", "none");

                var oldPwd = $("#chgOldPwd").val();
                var newPwd = $("#chgNewPwd").val();
                var ComfirmNewPwd = $("#chgComfirmNewPwd").val();

                if (oldPwd.length == 0) {
                    $("#chgOldValid").css("display", "inherit");
                }
                if (newPwd.length == 0) {
                    $("#chgNewPwdValid").css("display", "inherit");
                }
                if (ComfirmNewPwd.length == 0) {
                    $("#chgConfirmNewPwdValid").html("*确认密码不得为空");
                    $("#chgConfirmNewPwdValid").css("display", "inherit");
                }
                if (ComfirmNewPwd != newPwd) {
                    $("#chgConfirmNewPwdValid").html("*两次密码不一致");
                    $("#chgConfirmNewPwdValid").css("display", "inherit");
                }
                if (oldPwd.length > 0 && newPwd.length > 0 && ComfirmNewPwd.length > 0 && newPwd == ComfirmNewPwd) {
                    $.ajax({
                        type: "post",
                        url: "Ajax/RegisterLoginChangePwdFindPwd.ashx",
                        data: { "action": "changepwd", "oldpwd": oldPwd, "newpwd": newPwd },
                        dataType: "json",
                        success: function (data) {
                            if (data["status"] == "success") {
                                alert("密码修改成功，请重新登陆");
                                location.href = "菜单.aspx";
                            }
                            if (data["status"] == "oldPwdErr") {
                                alert("原密码错误");
                            }
                            if (data["status"] == "sesionErr") {
                                alert("Session过期，请重新登陆");
                                location.href = "菜单.aspx";

                            }
                        },
                        error: function () { }
                    });
                }

            });

            $("#chgOldPwd").focus(function () {
                $("#chgOldValid").css("display", "none");
            });
            $("#chgNewPwd").focus(function () {
                $("#chgNewPwdValid").css("display", "none");
            });
            $("#chgComfirmNewPwd").focus(function () {
                $("#chgConfirmNewPwdValid").css("display", "none");
            });

            $("#chgClear").click(function () {
                $("#chgOldValid").css("display", "none");
                $("#chgNewPwdValid").css("display", "none");
                $("#chgConfirmNewPwdValid").css("display", "none");
                $("#chgOldPwd").val("");
                $("#chgNewPwd").val("");
                $("#chgComfirmNewPwd").val("");

                $('#level').removeClass('pw-weak');
                $('#level').removeClass('pw-medium');
                $('#level').removeClass('pw-strong');
                $('#level').addClass(' pw-defule');
                //密码小于六位的时候，密码强度图片都为灰色

            });

            //密码强度检测
            $('#chgNewPwd').keyup(function () {
                var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");

                if (false == enoughRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-defule');
                    //密码小于六位的时候，密码强度图片都为灰色 
                }
                else if (strongRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-strong');
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
                }
                else if (mediumRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-medium');
                    //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
                }
                else {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass('pw-weak');
                    //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
                }
                return true;
            });

            //------------------修改密码----------------------------------------------------------
        });

        function setCookie(name1, value1) {
            document.cookie = name1 + "=" + value1;
        }

        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null)
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }
        
    </script>
    <%--密码强度样式--%>
<style type="text/css"> 
/*密码强度*/
.pw-strength {clear: both;position: relative;top: 8px;width: 170px;}
.pw-bar{background: url(images/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
.pw-bar-on{background:  url(images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
.pw-weak .pw-defule{ width:0px;}
.pw-weak .pw-bar-on {width: 60px;}
.pw-medium .pw-bar-on {width: 120px;}
.pw-strong .pw-bar-on {width: 179px;}
.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
</style>

</head>
<body>
    <form id="form1" runat="server">
    <table>
      <tr style=" height:28px;">
        <td><label>账号：</label></td>
        <td class="style2"><input  type="text" id="logUsername"/></td>
        <td><label id="logUsernameRequired" style=" color:Red; display:none;">*账号不得为空</label></td>
      </tr>
      <tr style=" height:28px;">
        <td><label>密码：</label></td>
        <td class="style2"><input  type="password" id="logPwd"/></td>
        <td><label id="logPwdRequired" style=" color:Red; display:none;">*密码不得为空</label></td>
      </tr>
      <tr style=" height:28px;">
        <td><label>验证码：</label></td>
        <td><input  type="text" id="tbVerificationCode" style=" vertical-align:middle; width:88px;"/>
        <img id="Img1" src="Captcha.ashx?codelength=4" alt="" onclick="javasrcipt: this.src='Captcha.ashx?codelength=4&&id='+Math.random();$('#tbVerificationCode').val('');" runat="server"  style=" vertical-align:middle"/></td>
        <td><label id="logCodeValid" style=" color:Red; display:none;">*验证码错误</label></td>
      </tr>
        <tr>
        <td></td>     
        <td><input  type="checkbox" value="rememberUserName" id="remUsername"/><label style=" font-size:13px">记住账号</label>
            <input  type="checkbox" value="rememberPwd" id="remPwd"/><label style=" font-size:13px">记住密码</label>
        </td>        
      </tr>
      <tr>
        <td></td>
        <td><input  type="button" value="登录" id="logLogin"/>&nbsp;&nbsp; <input  type="button" value="取消" id="logClear"/></td>        
      </tr>
       <tr>
        <td></td>
        <td><input  type="button" value="注册" id="logRegister"/>&nbsp;&nbsp; <input  type="button" value="找回密码" id="logFindPwd"/></td>        
      </tr>
    </table>
    <br />
    <br />

    <table>
      <tr style=" height:30px;">
        <td><label>账号：</label></td>
        <td><input  type="text" id="regUsername" style=" width:175px"/></td>
        <td><label id="regUsernameValid" style=" color:Red; display:none;">*账号不得为空</label></td>
      </tr>
      <tr style=" height:30px;">
        <td><label>密码：</label></td>
        <td><input  type="password" id="regPwd" style=" width:175px"/></td>
        <td><label id="regPwdValid" style=" color:Red; display:none;">*密码不得为空</label></td>
      </tr >
      <tr style=" height:30px;">
        <td><label>确认密码：</label></td>
        <td><input  type="password" id="regConfirmPwd" style=" width:175px"/></td>
        <td><label id="regConfirmPwdValid" style=" color:Red; display:none;">*两次密码不一致</label></td>
      </tr>
      <tr>
            <th>
                <br />
            </th>
            <td id="level2" class="pw-strength">
                <div class="pw-bar">
                </div>
                <div class="pw-bar-on">
                </div>
                <div class="pw-txt">
                    <span>弱</span> <span>中</span> <span>强</span>
                </div>
            </td>
        </tr>
      <tr style=" height:33px;">
        <td><label>邮箱：</label></td>
        <td><input  type="text" id="regEmail"/></td>
        <td><label id="regEmailValid" style=" color:Red; display:none;">*邮箱格式错误</label></td>
      </tr>
      <tr>
      <td></td>
        <td>&nbsp; <input  type="button" id="regRegister" value="注册"/>&nbsp;
        <input  type="button" id="regClear" value="清除"/></td>
      </tr>
    </table>
    <br />
    <br />

    <table>
      <tr style=" height:30px;">
        <td><label>账号：</label></td>
        <td><input  type="text" id="findUsername"/></td>
        <td><label id="findUsernameValid" style="  color:Red; display:none;">*账号不存在</label></td>
      </tr>
      
      <tr style=" height:30px;">
        <td></td>
        <td>&nbsp; <input  type="button" id="findOk" value="确定"/>&nbsp; <input  type="button" id="findClear" value="清除"/></td>
      </tr>
    </table>
    <br />
    <br />

    <table>
      <tr style=" height:30px;">
        <td><label>原密码：</label></td>
        <td><input  type="password" id="chgOldPwd"  style=" width:175px"/></td>
        <td><label id="chgOldValid" style=" color:Red; display:none;">*原密码不得为空</label></td>
      </tr>
      <tr style=" height:30px;">
        <td><label>新密码：</label></td>
        <td><input  type="password" id="chgNewPwd" style=" width:175px"/></td>
        <td><label id="chgNewPwdValid" style=" color:Red; display:none;">*新密码不得为空</label></td>
      </tr>
      <tr style=" height:30px;">
        <td><label>确认新密码：</label></td>
        <td><input  type="password" id="chgComfirmNewPwd" style=" width:175px"/></td>
        <td><label id="chgConfirmNewPwdValid" style=" color:Red; display:none;">*两次密码不一致</label></td>
      </tr>
      <tr>
            <th>
                <br />
            </th>
            <td id="level" class="pw-strength">
                <div class="pw-bar">
                </div>
                <div class="pw-bar-on">
                </div>
                <div class="pw-txt">
                    <span>弱</span> <span>中</span> <span>强</span>
                </div>
            </td>
        </tr>
      <tr></tr>
      <tr style=" height:50px">
        <td></td>
        <td>&nbsp; <input  type="button" id="chgOk" value="修改"/>&nbsp; <input  type="button" id="chgClear" value="清除"/></td>
      </tr>
    </table>
    </form>
</body>
</html>
